import React from 'react';
import type { Layout } from 'react-grid-layout';
import DraggableGrid from '@/components/Template/DraggableGrid';
import type { DragItemType, TemplateType } from '@/types/template';

interface DropItemPanelProps {
  type: TemplateType;
  addedItems: DragItemType[];
  isDropZoneOver?: boolean;
  onDrop?: (e: React.DragEvent<HTMLElement>) => void;
  onDragEnter?: (e: React.DragEvent<HTMLElement>) => void;
  onDragLeave?: (e: React.DragEvent<HTMLElement>) => void;
  onItemClick?: (item: DragItemType) => void;
  onItemDelete?: (item: DragItemType) => void;
  onLayoutChange?: (currentLayout: Layout[]) => void;
  onValueChange?: (item: DragItemType, value: string, reason?: string) => void;
}
export default function DropItemPanel({
  type = 'edit',
  addedItems,
  isDropZoneOver,
  onDrop,
  onDragEnter,
  onDragLeave,
  onLayoutChange,
  onItemClick,
  onItemDelete,
  onValueChange,
}: DropItemPanelProps) {
  // dragover：允许放置（必须调用 e.preventDefault()）
  const handleDragOver = (e: React.DragEvent<HTMLElement>) => {
    e.preventDefault();
  };
  return (
    <div
      className={`section-item template-section ${isDropZoneOver ? 'drop-over' : ''}`}
      onDrop={onDrop}
      onDragEnter={onDragEnter}
      onDragOver={handleDragOver}
      onDragLeave={onDragLeave}
    >
      <div className="content">
        <DraggableGrid
          type={type}
          addedItems={addedItems}
          onLayoutChange={onLayoutChange}
          onItemClick={onItemClick}
          onItemDelete={onItemDelete}
          onValueChange={onValueChange}
        />
      </div>
    </div>
  );
}
